
<template>
    <el-dialog title="选择广告" :visible.sync="showGoodsPop"  :close-on-click-modal="false"  >
        <el-form label-position="left"  style="width: 100%; padding-left: 20px;">
            <el-form-item label="所选广告：" v-if="count !== 1" >
                <div class="el-tag-box">
                    <el-tag v-for="(boxs, index) of boxCheck" :key="boxs.id" :closable="true" @close="delGoods(index)">{{boxs.title}}</el-tag>
                </div>
            </el-form-item>
        </el-form>
        <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left"  style="width: 100%">
            <el-row>
                <el-col :md="24" :lg="12" :xl="10">
                    <el-form-item label="所属广告位：" prop="position" label-width="100px">
                        <el-select v-model="listQuery.position" placeholder="请选择" clearable :disabled="disable">
                            <el-option v-for="item in pList" :key="item.position" :label="item.title" :value="item.position"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                 <el-col :md="24" :lg="12" :xl="10">
                    <el-form-item label="广告标题：" prop="keyword" label-width="90px" style="margin-left:10px">
                        <el-input @keyup.enter.native="search" v-model="listQuery.keyword" placeholder="请输入广告标题"  clearable></el-input>
                    </el-form-item>
                </el-col>  
            </el-row>
            <el-form-item label="" class="btn-item">
                <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
            </el-form-item> 
        </el-form>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
            <el-table-column align="center" width="50">
                <template slot-scope="scope">
                    <label class="input-radio" v-if="count === 1">
                        <input type="radio" :value="{id: scope.row.id}" v-model="itemsRadio"   @change="(e) => setValue(e.target.checked, scope.row)" />
                        <span></span>
                    </label>
                    <label class="input-checkbox" v-else>
                        <input type="checkbox" :value="{id: scope.row.id}" v-model="itemsCheck"  @change="(e) => setValue(e.target.checked, scope.row)" />
                        <span></span>
                    </label>
                </template>
            </el-table-column>
            <el-table-column align="center" label="标题" prop="title"></el-table-column>
            <el-table-column align="center" label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.imageUrl" class="adImg" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="开始时间" prop="startTime"></el-table-column>
            <el-table-column align="center" label="结束时间" prop="endTime"></el-table-column>
            <el-table-column align="center" label="位置">
                <template slot-scope="scope">
                     <p v-text="positionData[scope.row.position + '']"></p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="排序" prop="sort"></el-table-column>
            <el-table-column align="center" label="是否启用">
                <template slot-scope="scope">
                    <span>{{scope.row.enabled===1?'是':'否'}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="createdAt"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" 
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.pageSize" background
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
            style="text-align: center"
        ></el-pagination>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="btnDisabled" @click="chooseGoods">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { searchAdList, getPosition} from '@/api/bihuasuan/ad'
    export default {
        name: 'adChoose',
        props: {
            check: {
                type: Array,
                default() {
                    return [];
                }
            },
            count: {
                type: Number,
                default: -1
            },
            position: {
                type: String,
                default: ''
            },
            disable:{
                type: Boolean,
                default: false
            },
            enabled: {
                type:String,
                default:''
            }
        },
        data() {
            return {
                list: [],
                listQuery: {
                    keyword: '',
                    pageNum:1,
                    pageSize:10,
                    position: this.position,
                    type: "BANNER",
                    enabled:this.enabled
                },
                showGoodsPop: true,
                boxCheck: this.check,
                itemsCheck: this.check.length ? this.check.map(item => { return { id: item.id }}): [],
                itemsRadio: this.check.length ? {id: this.check[0].id} : {},
                listLoading: false,
                btnDisabled: false,
                listTotal:0,
                positionQuery: {
                    type: 'BANNER',
                    pageNum: 1,
                    pageSize: 9999
                },
                pList:[],
                positionData:{}
            }
        },
        created() {
            this.getPositionList()
        },
        methods: {
            // 获取广告位置列表
            getPositionList() {
                getPosition(this.positionQuery).then(res => {
                    this.pList = res.data.list
                    res.data.list.forEach(item => {
                        this.positionData[item.position] = item.title
                    })
                    this.getList()
                }).catch(err => {
                    this.pList = []
                })
            },
            // 获取列表
            getList() {
                this.listLoading = true
                searchAdList(this.listQuery).then((res) =>{
                    this.list = res.data.list
                    this.listTotal = res.data.total
                    this.listLoading = false
                }).catch(err=>{
                    console.log(err)
                    this.list = []
                    this.listTotal = 0
                    this.listLoading = false
                })
            },
            setValue(checked, row){
                if(checked){
                    if(this.count ===1 ){
                    this.boxCheck = [row]
                    } else {
                    this.boxCheck.push({ ...row })
                    }
                } else {
                    let index = this.itemsCheck.findIndex(item => row.id === item.id)
                    this.boxCheck.splice(index, 1)
                }
            },
            // 单击行
            clickRow(row) {
            if (this.count === 1) {
                this.itemsRadio = { id: row.id }
                this.boxCheck = [row]
            } else {
                let index = this.itemsCheck.findIndex(item => row.id === item.id)
                if (index < 0){
                this.itemsCheck.push({ id: row.id })
                this.boxCheck.push({ ...row })
                } else {
                this.itemsCheck.splice(index, 1)
                this.boxCheck.splice(index, 1)
                }
            }
            },
            // 通过tag删除
            delGoods(index) {
                this.itemsCheck.splice(index, 1)
                this.boxCheck.splice(index, 1)  
            },
            // 选择广告
            chooseGoods() {
                if(this.boxCheck.length < 1){
                    return this.$message.error('请选择活动');
                }
                if(this.count > 0 && this.boxCheck.length > this.count){
                    return this.$message.error(`最多选择${this.count}个活动`)
                }
                this.$emit('choose', this.boxCheck)
                this.close()
            },
            // 关闭弹窗
            close() {
                this.showGoodsPop = false
                document.body.removeChild(this.$el)
            },
            // 搜索
            search() {
                this.listQuery.pageNum = 1
                this.getList()
            },
            //切换每页条数
            handleSizeChange(value) {
                this.listQuery.pageSize = value
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.pageNum = page
                this.getList()
            }
        }
    }
</script>
<style lang="scss" scoped>
.adImg{
    height: 30px;
}
</style>